<template>
  <div>
    <div class="cart_items" v-show="isShow" v-if="cartGoods.length > 0">
      <div class="cart_items_hd">
        <div class="cart_left">购物车</div>
        <div class="clear" @click="clearBoth">清空</div>
      </div>
      <ul class="item">
        <li v-for="(item, index) in cartGoods" :key="index">
          <span class="food_name">{{ item.description }}</span>
          <span class="price"
            ><strong>￥{{ item.price }}</strong
            ><span class="cart_shop"
              ><span class="Btn" @click="subShopFoodsNum(index)">-</span
              ><input
                type="text"
                class="input"
                v-model="cartGoods[index].count"
              /><span class="Btn" @click="addShopFoodsNum(index)">+</span></span
            ></span
          >
        </li>
      </ul>
    </div>
    <div class="hidden" v-show="isShow"></div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  props: ['foods'],
  computed: {
    ...mapState(['cartGoods', 'isShow'])
  },
  methods: {
    addShopFoodsNum(index) {
      this.cartGoods[index].count++
    },
    subShopFoodsNum(index) {
      this.cartGoods[index].count--
      if (this.cartGoods[index].count === 0) {
        this.cartGoods.splice(index, 1)
        this.$store.commit('changeIsShow')
      }
    },
    // 清空购物车
    clearBoth() {
      this.$dialog
        .confirm({
          title: '是否清除全部商品'
        })
        .then(() => {
          // on confirm
          this.$store.commit('clearItems')
        })
        .catch(() => {
          // on cancel
          console.log('用户已取消')
        })
    }
  }
}
</script>

<style lang="less" scoped>
.hidden {
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  height: 100%;
  width: 100%;
  z-index: 1;
}

.cart_items {
  width: 100%;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 40px;
  z-index: 2;
  &.slide-enter-active,
  &.slide-leave-active {
    transition: transform 0.3s;
  }
  &.slide-enter,
  &.slide-leave-to {
    transform: translateY(0);
  }
  .cart_items_hd {
    height: 40px;
    width: 100%;
    background-color: #ccc;

    .cart_left {
      float: left;
      height: 100%;
      width: 270px;
      border-right: 1px solid #999;
      line-height: 40px;
      text-align: center;
      font-size: 16px;
      color: black;
    }
    .clear {
      text-align: center;
      line-height: 40px;
      font-size: 16px;
      color: black;
    }
  }
  .item {
    li {
      height: 35px;
      width: 100%;
      line-height: 35px;
      overflow: hidden;
      .food_name {
        font-size: 14px;
        padding-left: 10px;
      }
      .price {
        float: right;
        padding-right: 10px;
        strong {
          color: red;
          font-size: 13px;
          padding-right: 5px;
        }
        .cart_shop {
          display: inline-block;
          .Btn {
            display: inline-block;
            height: 15px;
            width: 15px;
            border-radius: 50%;
            background-color: rosybrown;
            line-height: 15px;
            text-align: center;
          }
          .input {
            height: 15px;
            width: 20px;
            border: 1px solid #ccc;
            margin: 0 5px;
            font-size: 5px;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>
